<script setup lang="ts">
import { computed, ref } from 'vue';

import { message, Modal, Textarea } from 'ant-design-vue';

import { rejectEarlyCheckOut } from '#/api';

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  orderNo: {
    type: String,
    default: '',
  },
});

const emit = defineEmits(['update:show', 'upOrderData']);
// 原因说明
const reason = ref('');

const open = computed({
  get() {
    return props.show;
  },
  set(newValue) {
    emit('update:show', newValue);
  },
});
const handleOk = async () => {
  try {
    await rejectEarlyCheckOut({
      orderNo: props.orderNo,
      reason: reason.value,
    });
    open.value = false;
    message.success('操作成功');
    emit('upOrderData');
  } catch (error) {
    console.error('拒绝修改失败：', error);
  }
};
</script>

<template>
  <div>
    <Modal v-model:open="open" @ok="handleOk">
      <div>
        <p class="mb-2 text-base">
          请输入拒绝修改订单的原因<span class="ml-1 text-red-500">*</span>
        </p>
        <Textarea
          v-model:value="reason"
          :auto-size="{ minRows: 5, maxRows: 5 }"
          :maxlength="200"
          :show-count="true"
          placeholder="请输入拒绝修改订单的原因"
        />
        <p class="mt-1 text-left text-red-600">
          请拒绝前优先电话联系客人说明原因，再确定拒绝。
        </p>
      </div>
    </Modal>
  </div>
</template>

<style scoped lang="scss"></style>
